<template>
    <view class="card-container">
		<view class="news-list">
			<!-- 置顶新闻 -->
			<view class="cardstyle stick">
				<text class="titlebox">党的二十届四中全会公报学习手账，为基本实现社会主义现代化而共同奋斗</text>
				<view class="tipsbox">
					<text class="stick-tag">置顶</text>
					<text>人民日报</text>
					<text class="comments">3162评</text>
					<view class="date-container">
						<text class="date">2025.10.25</text>
					</view>
				</view>
			</view>
			
			<!-- 非置顶新闻 第一条 -->
			<view class="cardstyle normal">
				<text class="titlebox">我国科学家在量子计算领域取得重大突破</text>
				<view class="tipsbox">
					<text>科技日报</text>
					<text class="comments">2580评</text>
					<view class="date-container">
						<text class="date">2025.10.24</text>
					</view>
				</view>
			</view>
			
			<!-- 非置顶新闻 第二条 -->
			<view class="cardstyle normal">
				<text class="titlebox">全球气候变化峰会在巴黎召开，多国签署新减排协议</text>
				<view class="tipsbox">
					<text>环球时报</text>
					<text class="comments">4210评</text>
					<view class="date-container">
						<text class="date">2025.10.23</text>
					</view>
				</view>
			</view>
			
			<!-- 带底部搜索框的新闻 -->
			<view class="cardstyle with-search">
				<text class="titlebox">本地生活服务平台推出新功能，市民生活更便捷</text>
				<view class="tipsbox">
					<text>本地日报</text>
					<text class="comments">1860评</text>
					<view class="date-container">
						<text class="date">2025.10.22</text>
					</view>
				</view>
				<view class="search-box">
					<text class="search-placeholder">搜索新闻...</text>
				</view>
			</view>
		</view>
	</view>
</template>

<style scoped>
	.card-container {
		padding: 20rpx;
	}
	
	.news-list {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}
	
	.cardstyle {
		border-radius: 20rpx;
		padding: 20rpx;
	}
	
	.cardstyle.stick {
		background-color: #00ffff;
	}
	.stick-tag {
		color: #f00;
	}
	
	.cardstyle.normal {
		background-color: #e0f7fa;
	}
	
	.cardstyle.with-search {
		background-color: #dcf5e3;
	}
	.search-box {
		display: flex;
		align-items: center;
		background-color: #fff;
		border-radius: 30rpx;
		padding: 16rpx 24rpx;
		margin-top: 20rpx;
	}

	.search-placeholder {
		font-size: 24rpx;
		color: #b3b3b3;
	}
	
	.titlebox {
		font-size: 32rpx;
		font-weight: 600;
		color: #1a1a1a;
		line-height: 48rpx;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
		margin-bottom: 24rpx;
	}
	
	.tipsbox {
		display: flex;
		align-items: center;
		font-size: 24rpx;
		color: #868686;
		gap: 24rpx;
	}
	
	.comments {
		position: relative;
		padding-left: 24rpx;
	}
	
	.date-container {
		flex: 1;
		display: flex;
		justify-content: flex-end;
	}
	
	.date {
		color: #b3b3b3;
	}
</style>